<template>
	<view>
		<view class="detailsTop">
					<image :src="bookList[0].BookCover"></image>
					<p class="Title">{{bookList[0].BookName}}</p>
					<p class="author">{{bookList[0].BookAuthor}}</p>
		</view>
		<view class="introduction">
			<p class="syncon">简介：{{bookList[0].SnyCon}}</p>
		</view>
		<view class="bottom">
			<view class="content" @click="toggle('left')">
				<image src="../../static/details/content.png"></image>
				<p>目录</p>
			</view>
      <view>
      <!-- 目录弹窗 -->
      <uni-popup ref="popup" background-color="#fff" >
        <scroll-view scroll-y="true" class="popup-content" :class="{ 'popup-height': type === 'left' }">
           <view class="cover">
             <image :src="bookList[0].BookCover"></image>
             <p class="bookname">{{bookList[0].BookName}}</p>
             <p class="bookauthor">{{bookList[0].BookAuthor}}</p>
             <p class="right">></p>
           </view>
           <view class="contitle" v-for="(item,i) in books">
              <text  @click="toread(item.BookId,i)">{{item.ConTitle}}</text>
           </view>
        </scroll-view>
      </uni-popup>
    </view>
			<button class="join" @click="addBook">
				{{control}}
			</button>
			<button class="read" @click="click">
				立即阅读
			</button>
		</view>
	</view>
</template>


<script>
  import {uniPopup} from '@dcloudio/uni-ui'
	export default {
		data() {
			return {
        control:'加入书架',
				bookList:[],
				id:'',
        books:[],
				content:[],
        type: 'center',
        uid:'',
        msgType: 'success',
        value: '',
        flag:'true',
			}
		},
		onLoad:function(option){
      this.uid=uni.getStorageSync('uid')
			this.id = option.BookId;
			console.log(this.id);
			this.getIndexData();
      this.getContent();
			var that = this;
			setTimeout(function () {
				// that.getIndexData();
				console.log('start pulldown');
			}, 1000);
			uni.startPullDownRefresh();
      this.judge();
		},
		onPullDownRefresh() {
			console.log('refresh');
			var that = this;
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		created() {
		},
		methods:{
			getIndexData:function(){
				uni.request({
					url:'http://z7jxxt5.nat.ipyingshe.com/select/message',
					method:'POST',
					data:{
						id:this.id
					},
					success:(res)=>{
						if(res.statusCode == 200){
							this.bookList = res.data.message;
						}else{
							uni.showToast({
								title:'内部服务器异常',
								duration:2000
							})
						}
					},

				})

			},
      getContent:function(){
      	uni.request({
      		url:'http://z7jxxt5.nat.ipyingshe.com/select/content',
      		method:'POST',
      		data:{
      			id:this.id
      		},
      		success:(res)=>{
      				this.books = res.data.content;
              console.log(this.books)
      		},
      	})
      },
      toggle(type) {
      	this.type = type
      	// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
      	this.$refs.popup.open(type)
      },
      dialogInputConfirm(val) {
      	setTimeout(() => {
      		uni.hideLoading()
      		console.log(val)
      		this.value = val
      		// 关闭窗口后，恢复默认内容
      		this.$refs.inputDialog.close()
      	}, 3000)
      },
      shareToggle() {
      	this.$refs.share.open()
      },
			click(){
				uni.navigateTo({
					url:"../read/read?bookid="+this.bookList[0].BookId
				})
			},
      toread(BookId,i){
        console.log(i)
        console.log(BookId)
        uni.navigateTo({
            url:'../read/read?bookid='+BookId+"&num="+i
        });
      },
			tocontent(){
				uni.navigateTo({
					url:"../content/content?bookid="+this.bookList[0].BookId
				})
			},
      addBook(){
        console.log(this.uid)
        console.log(this.id)
        if( this.control=="加入书架"){
          this.control="移出书架"
          uni.request({
          	url:'http://z7jxxt5.nat.ipyingshe.com/insert/bookcase',
          	method:'POST',
          	data:{
          		id:this.id,
              uid:this.uid,
          	},
          	success:(res)=>{
                console.log(res)
          			// this.books = res.data.content;
                // console.log(this.books)
          	},
          })
        }else if(this.control=="移出书架"){
          this.control="加入书架"
          uni.request({
          	url:'http://z7jxxt5.nat.ipyingshe.com/delete/bookcase',
          	method:'POST',
          	data:{
          		id:this.id,
              uid:this.uid,
          	},
          	success:(res)=>{
                console.log(res)
          			// this.books = res.data.content;
                // console.log(this.books)
          	},
          })
        }
      },
      judge(){
        uni.request({
        	url:'http://z7jxxt5.nat.ipyingshe.com/select/bookcase',
        	method:'POST',
        	data:{
            uid:this.uid,
            id:this.id
        	},
        	success:(res)=>{
            this.books=res.data.bookcase
            if(this.books.length>0){
              this.control="移出书架"
            }else if(this.books.length<=0){
              this.control="加入书架"
            }
            console.log(this.books)
        	},
        })
      }
		},
	}
</script>

<style lang="scss">
	body{
		background-color: $uni-text-color-disable;
	}
  .head{
    font-size: 20px;
    font-weight: bold;
    text-align: center;

  }
  .cover{
    height: 8vh;
    background-color: rgba(0,0,0,0.1);
    padding: 20px;
    image{
      height: 9vh;
      width: 12vw;
      box-shadow: 1px 3px 5px #999999;
      float: left;
    }
    .bookauthor{
      margin-left: 18vw;
      font-size: 11px;
      color: #999999;
      height: 30px;
      line-height: 30px;
      margin-top: 5px;
    }
    .bookname{
      margin-left: 18vw;
      line-height: 30px;
      height: 20px;
    }
    .right{
      color: #999999;
      text-align: right;
    }
  }
	.detailsTop{
		width: 100vh;
		height: 29vh;
		image{
			width: 25vw;
			height: 18vh;
			margin-left:37.5vw ;
			margin-top: 1vh;
		}
		.Title{
			width: 100vw;
			text-align: center;
			line-height: 25px;
		}
		.author{
			width: 100vw;
			text-align: center;
			font-size: 12px;
			line-height: 25px;
		}
	}
	.introduction{
		width: 100vw;
		height: 61vh;
		background-color: white;
		border-radius: 30px 30px 0 0 ;
		padding: 20px;
		box-sizing: border-box;
		line-height: 5vh;
	}
	.bottom{
		position: fixed;
		top: 90vh;
		bottom: 0;
		width: 100vw;
		height: 10vh;
		background-color: white;
		.content{
			width: 20vw;
			float:left;
			height: 10vh;
			font-size: 14px;
			padding: 3px;
			border: 0;
			image{
				float: left;
				width: 5vw;
				height: 2vh;
				margin-top: 3vh;
				margin-left: 2vw;
			}

			p{
				width: 10vw;
				height: 2vh;
				line-height: 8vh;
				float: left;
				margin-left: 3px;
			}

		}
		.read{
			width: 22vw;
			height: 4vh;
			float: right;
			font-size: 12px;
			border-radius: 15px;
			color: white;
			background-color: red;
			margin-top: 3vh;
			margin-right: 3vw;
		}
		.join{
			margin-right: 3vw;
			margin-top: 3vh;
			width: 22vw;
			height: 4vh;
			float: right;
			font-size: 12px;
			border-radius: 15px;
			background-color: rgba(255,0,0,0.2);
			color: red;
			border: 0;
		}

	}
@mixin flex {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	@mixin height {
		/* #ifndef APP-NVUE */
		/* #endif */
		/* #ifdef APP-NVUE */
		flex: 1;
		/* #endif */
	}

	.box {
		@include flex;
	}

	.button {
		@include flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		height: 35px;
		margin: 0 5px;
		border-radius: 5px;
	}

	.example-body {
		background-color: #fff;
		padding: 10px 0;
	}

	.button-text {
		color: #fff;
		font-size: 12px;
	}

	.popup-content {
    height: 100vh;
    width: 70vw;
		background-color: #fff;
	}
  .contitle{
      font-size: 14px;
      line-height: 40px;
      margin-left: 10px;
      height: 40px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
	.popup-height {
		@include height;
		width: 70vw;
	}

	.text {
		font-size: 12px;
		color: #333;
	}

</style>
